import { Input, View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { FC, useState } from 'react'
import { firstValueFrom } from 'rxjs'
import { useAuthFacade } from '@/hooks/useAuthFacade'
import './index.scss'

export const Activation: FC = () => {

  const [code, setCode] = useState('') //激活码
  const [authFacade] = useAuthFacade() 
  // 输入框值
  const handleBlur = (e) => {
    const text = e.detail.value as string
    setCode(text)
  }

  // 点击激活套餐
  const activationNow = async () => { 
    await firstValueFrom(authFacade.postActivateCode(code))
    .then(res=>{
      console.log('激活套餐返回值：', res)
      if (res.code === 200) {
        Taro.showToast({
          title: '激活成功',
          icon: 'none',
          duration: 2000
        })
      } else { 
        Taro.showToast({
          title: res.msg,
          icon: 'none',
          duration: 2000
        })
      }
    })  
  } 

  return (
    <View className='main'>
      <View>
        <View className='tittle'>激活服务</View>
        <Input className='input' placeholder='输入激活码' value={code} type='text' onBlur={handleBlur} />
      </View>
      {/* 激活 */}
      <View className='activation' onClick={activationNow}>
        <Text>立刻激活</Text>
      </View>
    </View>
  )
}

export default Activation